<!DOCTYPE html>
<html>
    <head>
        <title>CORS Test</title>
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="#" />
        <style type="text/css">
            body {text-align: center;}
            .wrapper {margin: 0 auto; text-align: left; width: 960px;}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <h4>Actions</h4>
            <ul class="link">
                <li><a href="#" onclick="do_direct();return false;">Test Direct</a></li>
                <li><a href="#" onclick="do_forbidden();return false;">Test Forbidden</a></li>
                <li><a href="#" onclick="do_simple();return false;">Test Simple</a></li>
                <li><a href="#" onclick="do_complex();return false;">Test Complex</a></li>
                <li><a href="#" onclick="do_credential();return false;">Test Credential</a></li>
            </ul>
            <div class="tips">&nbsp;</div>
        </div>
        <div class="wrapper">
            <h4>Server Logs</h4>
            <div class="logs"></div>
        </div>
    </body>
    <script type="text/javascript">
        const domain = 'http://127.0.0.1:8666';
        
        // ========= actions ========= //
        function do_direct() {
            const url = domain + '/?action=direct&id=' + getId();
            fetch(url, {
                method: 'POST',
                body: "time=" + (new Date).toLocaleString()
            }).then(() => {
                show_tips('direct action succeed', 0);
                reload_logs();
            }, (res) => {
                show_tips('direct action failed: ' + res, 1);
                reload_logs();
            });
        }
        function do_forbidden() {
            const url = domain + '/?action=forbidden&id=' + getId();
            fetch(url, {
                method: 'POST',
                body: "time=" + (new Date).toLocaleString()
            }).then(() => {
                show_tips('forbidden action succeed', 0);
                reload_logs();
            }, (res) => {
                show_tips('forbidden action failed: ' + res, 1);
                reload_logs();
            });
        }
        function do_simple() {
            const url = domain + '/?action=simple&id=' + getId();
            fetch(url, {
                method: 'POST',
                body: "time=" + (new Date).toLocaleString()
            }).then(() => {
                show_tips('simple action succeed', 0);
                reload_logs();
            }, (res) => {
                show_tips('simple action failed: ' + res, 1);
                reload_logs();
            });
        }
        function do_complex() {
            const url = domain + '/?action=complex&id=' + getId();
            fetch(url, {
                method: 'POST',
                headers: new Headers({Accept: 'application/json', MyHeader: 'test cors'}),
                body: JSON.stringify({time: (new Date).toLocaleString()})
            }).then(() => {
                show_tips('complex action succeed', 0);
                reload_logs();
            }, (res) => {
                show_tips('complex action failed: ' + res, 1);
                reload_logs();
            });
        }
        function do_credential() {
            const url = domain + '/?action=credential&id=' + getId();
            fetch(url, {
                method: 'POST',
                credentials: "include",
                body: "time=" + (new Date).toLocaleString()
            }).then(() => {
                show_tips('credential action succeed', 0);
                reload_logs();
            }, (res) => {
                show_tips('credential action failed: ' + res, 1);
                reload_logs();
            });
        }
        
        // ========== utils ========== //
        function reload_logs() {
            const url = domain + '/?action=log';
            fetch(url).then((res) => {
                res.text().then((resp) => {
                    document.querySelector('.logs').innerHTML = resp.replace(/\n/g, '<br />');
                });
            }, (res) => {
                show_tips('reload logs failed: ' + res);
            });
        }
        
        const idPrefix = 'i' + parseInt(Math.random() * 1000000) + '-';
        let idIdx = 1;
        function getId() {
            return idPrefix + (idIdx++);
        }
        
        let tsTips = null;
        function show_tips(msg, code) {
            if (tsTips) {
                clearTimeout(tsTips);
            }
            tsTips = setTimeout(() => {
                document.querySelector('.tips').innerHTML = '&nbsp;';
            }, 2000);
            let color = '#00F';
            if (code > 0) {
                color = '#F00';
            }
            document.querySelector('.tips').innerHTML = '<font color="' + color + '">' + msg + '</font>';
        }
        reload_logs();
    </script>
</html>